<script>

export default{
  name:"Tab",
  data(){
    return{
    
    }
  },
  mounted(){
    //向panes添加内容,this指向当前组件
    // console.log(this);
    this.$parent.panes.push(this);
  },
  computed:{
    active(){
      // console.log(this.$parent.value,this.index);
      return this.$parent.value == this.index;
    }
  },
  props:{
    label:{
      type:String,
      default:"tab"
    },
    index:{
      type:[String,Number],
      required:true
    }
  },
  methods:{
    handlerClick(event){
      this.$parent.onChanges(this.index)
    }
  },
  render(){
    let tab = this.$slots.label || this.label;
    let classNames = {
      tab:true,
      active:this.active
    }
    return(
      <li class={classNames} onClick={this.handlerClick}>{tab}</li>
    )
  }
}


</script>

<style lang="css" scoped>

.tab{
  text-align: center;
  flex: 1;
  list-style:none;
  line-height:0.5rem;
  margin-right:0.05rem;
  position:relative;
  bottom:-0.02rem;
  cursor:pointer;
  text-align: center;
}

.tab.active{
  color: #109D59;
  border-bottom: 0.03rem solid #109D59;
}

.tab.last-child{
  margin-right:0;
}

</style>